import style from './index.less';
import { LockOutlined, UserOutlined, SafetyOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, message } from 'antd';
import { useState } from 'react';
import { SetStateAction } from 'react';

import { history } from 'umi';
import { getuuidAPI, loginAPI } from '@/http/index';

export default function LoginPage() {
  const [username, setUsername] = useState('45期最靓的仔');
  const [password, setPassword] = useState('123456');
  const [code, setcode] = useState('888888');

  // 登录按钮
  const loginSubmit = () => {
    let uuid;
    getuuidAPI().then((res) => {
      if (res.code === 200) {
        uuid = res.uuid;
        loginAPI({
          username,
          password,
          code,
          uuid,
        }).then((res) => {
          if (res.code === 200) {
            message.success('登录成功');
            history.push('/');
            localStorage.setItem('token', res.token);
          } else {
            message.error(res.msg);
          }
        });
      }
    });
  };

  return (
    <div className={style.login}>
      <img
        src="http://xue.cnkdl.cn:23683/static/img/login-background.f9f49138.jpg"
        alt=""
      />
      <div className={style.loginForm}>
        <div className={style.loginBox}>
          <h3>e店邦O2O平台</h3>
          <div className={style.from}>
            <Form
              name="normal_login"
              className="login-form"
              initialValues={{ remember: true }}
            >
              <Form.Item
                name="username"
                rules={[{ required: true, message: '请输入账号' }]}
              >
                <Input
                  prefix={<UserOutlined className="site-form-item-icon" />}
                  placeholder="账号"
                  size="large"
                  className={style.input}
                  value={username}
                  onChange={(val) => setUsername(val.target.value)}
                />
              </Form.Item>
              <Form.Item
                name="password"
                rules={[{ required: true, message: '请输入密码' }]}
              >
                <Input
                  prefix={<LockOutlined className="site-form-item-icon" />}
                  type="Password"
                  placeholder="密码"
                  size="large"
                  value={password}
                  onChange={(val) => setPassword(val.target.value)}
                />
              </Form.Item>
              <Form.Item>
                <Form.Item
                  name="code"
                  rules={[{ required: true, message: '请输入验证码' }]}
                  className={style.code}
                >
                  <Input
                    prefix={<SafetyOutlined />}
                    placeholder="验证码"
                    value={code}
                    size="large"
                    onChange={(val) => setcode(val.target.value)}
                  />
                </Form.Item>
                <img
                  className={style.codeImg}
                  src=""
                  alt=""
                />
              </Form.Item>
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox> 记住密码</Checkbox>
              </Form.Item>

              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  className="login-form-button"
                  onClick={loginSubmit}
                >
                  登录
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    </div>
  );
}
